<template>
  <div>
    <el-row class="demo-autocomplete">
      <el-col :span="6">
        <el-autocomplete
            class="inline-input"
            v-model="video_vname"
            :fetch-suggestions="querySearch"
            placeholder="请输视频标题"
            @select="handleSelect"
            :trigger-on-focus="false"
            @keydown.enter.native="searchVideo(pageNum,video_vname,video_uid)"
        >
          <el-button slot="append" icon="el-icon-search"
                     @click="searchVideo(pageNum,video_vname,video_uid)"></el-button>
        </el-autocomplete>
      </el-col>
      <el-col :span="6">
        <el-input
            class="inline-input"
            v-model="video_uid"
            placeholder="请输入作者id"
            @keydown.enter.native="searchVideo(pageNum,video_vname,video_uid)"
        >
          <el-button slot="append" icon="el-icon-search"
                     @click="searchVideo(pageNum,video_vname,video_uid)"></el-button>
        </el-input>
      </el-col>
      <el-col :span="1" :offset="9">
        <el-button type="primary" @click="createDialogVisible=!createDialogVisible"
                   style="font-size: 20px;font-weight: 800">视频投稿<i class="el-icon-upload el-icon--right"></i>
        </el-button>
      </el-col>
    </el-row>

    <el-table
        stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        highlight-current-row
        :data="items"
        style="width: 100%"
        height="600">
      <el-table-column
          fixed
          label="视频标题"
          width="110">
        <template slot-scope="scope">
          <i class="el-icon-video-play"></i>
          <span style="margin-left: 10px">{{ scope.row.video_vname }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="视频号"
          width="110">
        <template slot-scope="scope">
          <i class="el-icon-paperclip"></i>
          <span style="margin-left: 10px">{{ scope.row.video_vid }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="作者"
          width="110">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.video_uid }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="上传时间"
          width="190">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.video_timestamp }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="播放量"
          width="90">
        <template slot-scope="scope">
          <i class="el-icon-data-line" style="transform: rotate(180deg)"></i>
          <span style="margin-left: 10px">{{ scope.row.video_vv }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="点赞数"
          width="90">
        <template slot-scope="scope">
          <i class="el-icon-thumb"></i>
          <span style="margin-left: 10px">{{ scope.row.video_like }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="url"
          width="90">
        <template slot-scope="scope">
          <el-link
              icon="el-icon-caret-right"
              style="font-size: 30px"
              v-if="!isHttpUrl(scope.row.video_url)"
              :href="'http://'+ip+':'+port+scope.row.video_url"
              :underline="false"
          ></el-link>
          <el-link
              icon="el-icon-caret-right"
              style="font-size: 30px"
              v-if="isHttpUrl(scope.row.video_url)"
              :href="scope.row.video_url"
              :underline="false"
          ></el-link>
        </template>
      </el-table-column>
      <el-table-column
          label="视频封面"
          width="110">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              v-if="!isHttpUrl(scope.row.video_img)"
              :src="'http://'+ip+':'+port+scope.row.video_img"
          ></el-image>
          <el-image
              style="width: 100px; height: 100px"
              v-if="isHttpUrl(scope.row.video_img)"
              :src="scope.row.video_img"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="updateDialogOpen(
                  scope.row.video_vid,
                  scope.row.video_vname,
                  scope.row.video_url,
                  scope.row.video_img
              )">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="deleteVideo(scope.row.video_vid)">删除
          </el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
    </el-pagination>

    <!--修改页面-->
    <el-dialog
        title="修改视频信息"
        :visible.sync="updateDialogVisible"
        width="50%"
        center>
      <el-row>
        <el-col :span="16" :offset='4'>
          <el-form status-icon="form" :model="form" label-width="80px" :rules="rules" hide-required-asterisk>
            <el-form-item label="视频标题" prop="video_vname">
              <el-input v-model="form.video_vname"></el-input>
            </el-form-item>
            <el-form-item label="作者" v-if="false">
              <el-input v-model="form.video_uid" disabled></el-input>
            </el-form-item>
            <el-form-item label="视频URL" prop="video_url">
              <el-input v-model="form.video_url"></el-input>
            </el-form-item>
            <el-form-item label="视频封面" prop="video_img">
              <el-input v-model="form.video_img"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="updateVideo">确 定</el-button>
       </span>
    </el-dialog>

    <!--投稿页面-->
    <el-dialog
        title="视频投稿"
        :visible.sync="createDialogVisible"
        width="50%"
        center>
      <el-row>
        <el-col :span="16" :offset='4'>
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="视频标题" prop="video_vname">
              <el-input v-model="form.video_vname"></el-input>
            </el-form-item>
            <el-form-item label="作者" v-if="false">
              <el-input v-model="form.video_uid" disabled></el-input>
            </el-form-item>
            <el-form-item label="视频URL" prop="video_url">
              <el-input v-model="form.video_url"></el-input>
            </el-form-item>
            <el-form-item label="视频封面" prop="video_img">
              <el-input v-model="form.video_img"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="creatVideo">确 定</el-button>
       </span>
    </el-dialog>
  </div>

</template>

<script>


export default {
  name: "VideoTab",

  data() {
    return {
      items: [],

      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,
      pageNum: 1,
      pageSize: 1,
      pageTotal: 1,
      total: 1,
      video_vname: "",
      video_uid: "",
      restaurants: [],

      // 弹窗
      createDialogVisible: false,
      updateDialogVisible: false,


      form: {
        video_vid: '',
        video_vname: '',
        video_uid: this.$root.sessionId,
        video_url: '',
        video_img: '',

      },


      rules: {
        video_vname: [
          {required: true, message: '请输入视频标题', trigger: 'blur'},
          {
            pattern: /^((?!fuck|sb|nb|傻).)*$/,    //正则校验不用字符串
            message: "包含敏感词", trigger: "blur"
          }

        ],
        video_url: [
          {required: true, message: '请输入视频URL', trigger: 'blur'},
          {
            pattern: /https?:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,    //正则校验不用字符串
            message: "请填写正确的资源链接 Ps: http://...", trigger: "blur"
          }

        ],
        video_img: [
          {required: true, message: '请输入视频封面URL', trigger: 'blur'},
          {
            pattern: /https?:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,    //正则校验不用字符串
            message: "请填写正确的资源链接 Ps: http://...", trigger: "blur"
          }
        ],
      },

    }

  },

  methods: {
    searchVideo: function (pageNum, video_vname, video_uid) {
      var that = this;
      // console.log("http://"+that.GLOBAL.ip+":"+that.GLOBAL.port+"/video/main?pageNum=" + pageNum + "&video_vname=" + video_vname + "&video_uid=" + video_uid);
      this.$http.get("http://" + that.ip + ":" + that.port + "/video/main?pageNum=" + pageNum + "&video_vname=" + video_vname + "&video_uid=" + video_uid)

          .then(function (response) {
            console.log(response.data.list);
            that.items = response.data.list;
            that.total = response.data.total;
            that.pageNum = response.data.pageNum;
            that.pageSize = response.data.pageSize;
            that.pageTotal = response.data.pageTotal;
          })
          .catch(function (err) {
            console.log(err);
            this.$message.error(
                err);
          });

    },

    deleteVideo: function (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var that = this;
        this.$http.get("http://" + that.ip + ":" + that.port + "/video/delete/" + id)
            .then(function (response) {
              console.log(response);
              that.searchVideo(that.pageNum, that.video_vname, that.video_uid);
            }).catch(function (err) {
          console.log(err)
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    creatVideo() {
      var that = this;
      if (this.form.video_vname == '' || !this.isHttpUrl(this.form.video_url) || !this.isHttpUrl(this.form.video_img)||!this.isSensitiveWord(this.form.video_vname)) {
        that.$message.error(
            '投稿失败,请检查后再次提交');
      } else {
        this.$http.post("http://" + that.ip + ":" + that.port + "/video/create", that.form)
            .then(function (response) {
              console.log(response);
              that.$message({
                message: "投稿成功",
                type: 'success'
              });
              that.searchVideo(that.pageNum, that.video_vname, that.video_uid);
              that.createDialogVisible = false;
              that.form.video_vname = '';
              that.form.video_url = '';
              that.form.video_img = '';
            }).catch(function (err) {
          console.log(err);
          that.$message.error(
              '投稿失败');
        });
      }
    },


    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchVideo(val, this.video_vname, this.video_uid);
    },


    // 自动补全input接口  restaurants===item接口名未改动
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    cancelBtn(){
      this.createDialogVisible = false;
      this.updateDialogVisible = false;
      this.form.video_vname = '';
      this.form.video_url = '';
      this.form.video_img = '';
    },

    loadAll() {
      return [
        {"value": "茶礼", "name": "茶礼"},
        {"value": "瑜伽", "name": "瑜伽"},
        {"value": "健身", "name": "健身"},
        {"value": "八段锦", "name": "八段锦"},

      ];
    },
    handleSelect(item) {
      console.log(item);
    },

    // url格式验证
    isHttpUrl(url) {
      const reg_url = /https?:\/\/[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/;
      return reg_url.test(url)
    },

//敏感词验证
    isSensitiveWord(str) {
      const reg_str = /^((?!fuck|sb|nb|傻).)*$/;
      return reg_str.test(str);
    },


    updateDialogOpen(video_vid, video_vname, video_url, video_img) {
      this.form.video_vid = video_vid;
      this.form.video_vname = video_vname;
      this.form.video_url = video_url;
      this.form.video_img = video_img;
      this.updateDialogVisible = true;
    },
    updateVideo() {
      var that = this;
      this.$http.post("http://" + that.ip + ":" + that.port + "/video/doEdit", that.form)
          .then(function (response) {
            console.log(response);
            that.$message({
              message: "修改成功",
              type: 'success'
            });
            that.searchVideo(that.pageNum, that.video_vname, that.video_uid);
            that.updateDialogVisible = false;
            that.form.video_vid = '';
            that.form.video_vname = '';
            that.form.video_url = '';
            that.form.video_img = '';
          }).catch(function (err) {
        console.log(err);
        that.$message.error(
            '修改失败');
      });
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
    this.searchVideo(1, '', '');
  },

  created() {

  },


}
</script>

<style scoped>


</style>